<template>
  <el-drawer v-model="open" :title="title" size="50%" @close="onClose">
    <el-descriptions :column="1" border>
      <el-descriptions-item :label="$t('channelType.name')">{{ form.channelName }}</el-descriptions-item>
      <el-descriptions-item :label="$t('channelType.code')">{{ form.channelCode }}</el-descriptions-item>
      <el-descriptions-item :label="$t('channelType.description')">{{ form.description }}</el-descriptions-item>
      <el-descriptions-item :label="$t('channelType.sortIndex')">{{ form.sortIndex }}</el-descriptions-item>
      <el-descriptions-item :label="$t('channelType.status')">
        <el-tag :type="form.status === 1 ? 'success' : 'info'">
          {{ form.status === 1 ? $t('jbx.text.enable') : $t('jbx.text.disable') }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('jbx.text.createdDate')">{{ parseTime(form.createTime) }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="onClose">{{ $t('jbx.text.close') }}</el-button>
    </template>
  </el-drawer>
</template>

<script setup name="ChannelTypeDetail" lang="ts">
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { parseTime } from "@/utils/Jinbooks";
import { getChannel } from "@/api/channel/channel";

const { t } = useI18n();

const open = ref(false);
const form = ref({});

const props = defineProps<{
  title?: string
  open?: boolean
  formId?: string
}>();

const emit = defineEmits(['update:open']);

watch(
    () => props.open,
    (val) => {
      if (val) {
        open.value = val
        if (props.formId) {
          getChannel(props.formId).then((response: any) => {
            form.value = response.data;
          });
        }
      } else {
        open.value = false;
      }
    },
    { immediate: true }
);

function onClose() {
  open.value = false;
  emit('update:open', false);
}
</script>